<template>
  <basic-container>
    <div id="usermanagement">
      <h3>用户管理</h3>
      <div class="search">
        <el-input
          placeholder="请输入关键字"
          @change="search"
          v-model="value"
          style="width: 15vw"
          clearable
        ></el-input>
      </div>
      <avue-crud
        ref="crud"
        :option="option"
        :data="data"
        :page="page"
        @row-save="rowSave"
        @row-update="addUpdate"
        @row-del="rowDel"
        @on-load="onLoad"
      >
        <template slot-scope="scope" slot="menu">
          <el-button
            type="primary"
            size="small"
            plain
            @click="chakan(scope.row)"
            >修改密码</el-button
          >
          <el-dialog title="修改密码" :visible.sync="dialogFormVisible">
            <el-form :model="passWord">
              <el-form-item label="用户编号" label-width="10">
                <el-input
                  v-model="passWord.id"
                  :disabled="true"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <br />
              <br />
              <el-form-item label="密码" label-width="10">
                <el-input
                  v-model="passWord.passWord"
                  show-password
                  autocomplete="off"
                ></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button
                type="primary"
                @click="handleEdit(passWord)"
                >确 定</el-button
              >
            </div>
          </el-dialog>
        </template>
      </avue-crud>
    </div>
  </basic-container>
</template>

<script>
import $ from "jquery";
// let baseUrl = "http://192.168.0.220:8091";
let baseUrl = "http://122.51.69.142:8091"; //服务器地址
var dicDatas = {
  face: [],
  shares: [],
  consumTypeId: [],
};

// const axios= require('axios')
export default {
  data() {
    return {
      page: {
        total: 0,
        pageNum: 1,
        pageSize: 20,
        pageSizes: [20, 30, 40, 50],
      },
      data: [],
      list: [],
      option: {
        addBtn: true,
        addRowBtn: false,
        align: "center",
        menuAlign: "center",
        dialogClickModal: false,
        column: [
          {
            label: "用户编号",
            prop: "id",
            editDetail: true,
            addDisabled: true,
          },
          {
            label: "用户名称",
            prop: "name",
            rules: [
              {
                required: true,
                message: "请输入用户名称",
                trigger: "blur",
              },
            ],
          },
          {
            label: "用户账号",
            prop: "userName",
            rules: [
              {
                required: true,
                message: "请输入用户账号",
                trigger: "blur",
              },
            ],
          },
          {
            label: "密码",
            prop: "passWord",
            type: "password",
            editDetail: true,
            hide: true,
            rules: [
              {
                required: true,
                message: "请输入密码",
                trigger: "blur",
              },
            ],
          },
          {
            label: "用户属性",
            prop: "property",
            rules: [
              {
                required: true,
                message: "请输入用户属性",
                trigger: "blur",
              },
            ],
          },
          {
            label: "手机号码",
            prop: "phone",
            rules: [
              {
                required: true,
                message: "请输入手机号码",
                trigger: "blur",
              },
            ],
          },
          {
            label: "用户角色",
            prop: "description",
            type: "select",
            multiple: true,
            dicUrl: `${baseUrl}/pc/getPcUserRoleList`,
            props: {
              label: "description",
              value: "roleId",
            },
            rules: [
              {
                required: true,
                message: "请输入用户角色",
                trigger: "blur",
              },
            ],
          },
        ],
      },
      dialogFormVisible: false,
      value: "",
      shopname: [],
      shopkeeper: [],
      shopnamevalue: "",
      shopkeepervalue: "",
      dic: [],
      passWord:{}
    };
  },
  mounted() {
    this.getDataList();
    this.shop();
    this.keeper();
  },
  methods: {
    // 进入页面加载
    getDataList() {
      let _this = this;
      _this.$ajax
        .post(`${baseUrl}/pc/getPcUserList`, {
          pageNum: _this.page.pageNum,
          pageSize: _this.page.pageSize,
        })
        .then(function (res) {
          //请求成功
          let resData = res.data;
          if (resData.code == 200) {
            _this.page.total = resData.data.count;
            _this.data = resData.data.pcUserList;
          } else {
            _this.$message.error(resData.msg);
          }
        })
        .catch(function (error) {
          //请求失败
          console.log(error);
        });
    },
    // 获取店铺名称
    shop() {
      let _this = this;
      _this.$ajax
        .post(`${baseUrl}/pc/getShopList`)
        .then(function (res) {
          //请求成功
          let resData = res.data;
          if (resData.code == 200) {
            resData.data.forEach((item) => {
              _this.shopname.push({
                value: item.shopId,
                label: item.name,
              });
              dicDatas.face.push({
                value: item.shopId,
                label: item.name,
              });
            });
          } else {
            _this.$message.error(resData.msg);
          }
        })
        .catch(function (error) {
          //请求失败
          console.log(error);
        });
    },
    // 获取店主列表
    keeper() {
      let _this = this;
      _this.$ajax
        .post(`${baseUrl}/pc/getShopkeeperList`)
        .then(function (res) {
          //请求成功
          let resData = res.data;
          if (resData.code == 200) {
            resData.data.forEach((item) => {
              _this.shopkeeper.push({
                label: item.name,
                value: item.id + "",
              });
            });
            // console.log(_this.shopkeeper);
          } else {
            _this.$message.error(resData.msg);
          }
        })
        .catch(function (error) {
          //请求失败
          console.log(error);
        });
    },
    //店主下拉点击
    keepersearch() {
      let _this = this;
      _this.$ajax
        .post(`${baseUrl}/pc/getShopByShopUserId`, {
          shopUserId: _this.shopkeepervalue,
        })
        .then(function (res) {
          //请求成功
          // console.log(res);
          let resData = res.data;
          if (resData.code == 200) {
            _this.shopname = [];
            resData.data.forEach((item) => {
              _this.shopname.push({
                value: item.shopId,
                label: item.name,
              });
            });
            // console.log(_this.shopname);
          } else {
            _this.$message.error(resData.msg);
          }
        })
        .catch(function (error) {
          //请求失败
          console.log(error);
        });
    },
    // 分页
    onLoad(page) {
      this.page.pageNum = page.currentPage; //页数
      this.page.pageSize = page.pageSize; //条数
      this.getDataList();
    },
    // 新增
    rowSave(form, done) {
      let _this = this;
      _this.$ajax
        .post(`${baseUrl}/pc/updatePcUser`, {
          action: 1,
          userName: form.userName,
          name: form.name,
          passWord: form.passWord,
          property: form.property,
          phone: form.phone,
          roles: form.description,
        })
        .then(function (res) {
          //请求成功
          let resData = res.data;
          if (resData.code == 200) {
            _this.$message.success("新增成功");
            _this.getDataList();
          } else {
            _this.$message.error(resData.msg);
          }
        })
        .catch(function (error) {
          //请求失败
          console.log(error);
        });
      done();
    },
    // 修改保存
    addUpdate(form, index, done) {
      let _this = this;
      let description = [];
      if (typeof form.description == "string") {
        description = [form.description];
      } else {
        description = form.description;
      }
      _this.$ajax
        .post(`${baseUrl}/pc/updatePcUser`, {
          action: 2,
          pcUserId: form.id,
          userName: form.userName,
          name: form.name,
          property: form.property,
          phone: form.phone,
          roles: description,
        })
        .then(function (res) {
          //请求成功
          let resData = res.data;
          if (resData.code == 200) {
            _this.$message.success("修改成功");
            _this.getDataList();
          } else {
            _this.$message.error(resData.msg);
          }
        })
        .catch(function (error) {
          //请求失败
          console.log(error);
        });
      done();
    },
    // 删除按钮
    rowDel(row) {
      let _this = this;
      _this
        .$confirm("是否删除该条信息？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(() => {
          _this.$ajax
            .post(`${baseUrl}/pc/updatePcUser`, {
              action: 4,
              pcUserId: row.id,
            })
            .then(function (res) {
              //请求成功
              let resData = res.data;
              if (resData.code == 200) {
                _this.$message.success("删除成功");
                _this.getDataList();
              } else {
                _this.$message.error(resData.msg);
              }
            })
            .catch(function (error) {
              //请求失败
              console.log(error);
            });
        });
    },
    // 修改密码
    handleEdit(row) {
      let _this = this;
      _this.$ajax
        .post(`${baseUrl}/pc/updatePcUser`, {
          action: 3,
          pcUserId: row.id,
          passWord: row.passWord,
        })
        .then(function (res) {
          //请求成功
          let resData = res.data;
          if (resData.code == 200) {
            _this.dialogFormVisible = false;
            _this.$message.success("修改成功");
          } else {
            _this.$message.error(resData.msg);
          }
        })
        .catch(function (error) {
          //请求失败
          console.log(error);
        });
    },
    // 分成人员列表
    Share(id) {
      let _this = this;
      _this.$ajax
        .post(`${baseUrl}/pc/getBindablePartnerList`, {
          shopId: id,
        })
        .then(function (res) {
          //请求成功
          dicDatas.shares = [];
          let resData = res.data;
          if (resData.code == 200) {
            let arr = [];
            resData.data.forEach((item) => {
              arr.push({
                label: item.name,
                value: item.id,
              });
            });
            let arr1 = [...dicDatas.shares];
            let data = arr.concat(arr1);
            let hash = {};
            data = data.reduce((item, next) => {
              if (!hash[next.value]) {
                hash[next.value] = true;
                item.push(next);
              }
              return item;
            }, []);
            dicDatas.shares = data;
          } else {
            _this.$message.error(resData.msg);
          }
        })
        .catch(function (error) {
          //请求失败
          console.log(error);
        });
    },
    // 关键字搜索
    search() {
      let _this = this;
      _this.$ajax
        .post(`${baseUrl}/pc/getPcUserList`, {
          keyWord: _this.value,
          pageNum: _this.page.pageNum,
          pageSize: _this.page.pageSize,
        })
        .then(function (res) {
          //请求成功
          let resData = res.data;
          if (resData.code == 200) {
            $(".el-pagination").css("display", "inline-block");
            _this.page.total = resData.data.count;
            _this.data = resData.data.pcUserList;
          } else {
            _this.data = [];
            $(".el-pagination").css("display", "none");
            _this.$message.error(resData.msg);
          }
        })
        .catch(function (error) {
          //请求失败
          console.log(error);
        });
    },
    chakan(data) {
      this.passWord = data;
      this.dialogFormVisible =true;
    }
  },
};
</script>

<style>
.search {
  margin: 10px 0;
}

.search .el-select {
  margin-right: 10px;
  margin-bottom: 10px;
}

.v-modal {
  position: unset;
}

.avue-crud .el-table .el-form-item__label {
  left: 15vw;
}
</style>
